/**
 * 头部导航组件
 * 负责处理导航菜单、移动端菜单交互等功能
 */

class HeaderComponent {
    constructor() {
        this.header = null;
        this.navMenu = null;
        this.mobileMenuButton = null;
        this.searchButton = null;
        this.searchOverlay = null;
        this.searchInput = null;
        this.isMenuOpen = false;
        this.isSearchOpen = false;
        this.scrollPosition = 0;
    }

    /**
     * 初始化头部组件
     */
    init() {
        this.header = document.querySelector('header');
        this.navMenu = document.querySelector('.nav-menu');
        this.mobileMenuButton = document.querySelector('.mobile-menu-button');
        this.searchButton = document.querySelector('.search-button');
        this.searchOverlay = document.querySelector('.search-overlay');
        this.searchInput = document.querySelector('.search-input');

        this.setupEventListeners();
        this.setupScrollEffects();
        this.updateActiveNavLink();
    }

    /**
     * 设置事件监听器
     */
    setupEventListeners() {
        // 移动端菜单按钮点击事件
        if (this.mobileMenuButton) {
            this.mobileMenuButton.addEventListener('click', () => {
                this.toggleMobileMenu();
            });
        }

        // 搜索按钮点击事件
        if (this.searchButton) {
            this.searchButton.addEventListener('click', () => {
                this.toggleSearchOverlay();
            });
        }

        // 搜索遮罩点击关闭
        if (this.searchOverlay) {
            this.searchOverlay.addEventListener('click', (e) => {
                if (e.target === this.searchOverlay) {
                    this.closeSearchOverlay();
                }
            });
        }

        // 搜索输入框回车事件
        if (this.searchInput) {
            this.searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    this.handleSearch();
                }
            });
        }

        // 导航链接点击事件
        const navLinks = document.querySelectorAll('.nav-menu a');
        navLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                this.handleNavLinkClick(e);
            });
        });

        // ESC键关闭搜索或菜单
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (this.isSearchOpen) {
                    this.closeSearchOverlay();
                } else if (this.isMenuOpen) {
                    this.closeMobileMenu();
                }
            }
        });
    }

    /**
     * 设置滚动效果
     */
    setupScrollEffects() {
        window.addEventListener('scroll', () => {
            const currentPosition = window.scrollY;
            
            // 导航栏滚动效果
            if (currentPosition > 100) {
                this.header.classList.add('scrolled');
            } else {
                this.header.classList.remove('scrolled');
            }

            // 检测滚动方向
            if (currentPosition > this.scrollPosition && currentPosition > 300) {
                // 向下滚动，隐藏导航栏
                this.header.classList.add('hide');
            } else {
                // 向上滚动，显示导航栏
                this.header.classList.remove('hide');
            }

            this.scrollPosition = currentPosition;
        });
    }

    /**
     * 切换移动端菜单
     */
    toggleMobileMenu() {
        if (this.isMenuOpen) {
            this.closeMobileMenu();
        } else {
            this.openMobileMenu();
        }
    }

    /**
     * 打开移动端菜单
     */
    openMobileMenu() {
        this.isMenuOpen = true;
        this.header.classList.add('menu-open');
        this.navMenu.classList.add('active');
        this.mobileMenuButton.classList.add('active');
        
        // 防止背景滚动
        document.body.style.overflow = 'hidden';

        // 添加动画类
        setTimeout(() => {
            this.navMenu.classList.add('animated');
        }, 10);
    }

    /**
     * 关闭移动端菜单
     */
    closeMobileMenu() {
        this.isMenuOpen = false;
        this.header.classList.remove('menu-open');
        this.navMenu.classList.remove('animated');
        
        // 等待动画完成后移除active类
        setTimeout(() => {
            this.navMenu.classList.remove('active');
            this.mobileMenuButton.classList.remove('active');
            
            // 恢复背景滚动
            document.body.style.overflow = '';
        }, 300);
    }

    /**
     * 切换搜索遮罩
     */
    toggleSearchOverlay() {
        if (this.isSearchOpen) {
            this.closeSearchOverlay();
        } else {
            this.openSearchOverlay();
        }
    }

    /**
     * 打开搜索遮罩
     */
    openSearchOverlay() {
        this.isSearchOpen = true;
        this.searchOverlay.classList.add('active');
        
        // 防止背景滚动
        document.body.style.overflow = 'hidden';

        // 等待遮罩显示后聚焦输入框
        setTimeout(() => {
            this.searchOverlay.classList.add('animated');
            this.searchInput.focus();
        }, 10);
    }

    /**
     * 关闭搜索遮罩
     */
    closeSearchOverlay() {
        this.isSearchOpen = false;
        this.searchOverlay.classList.remove('animated');
        
        // 清除搜索输入
        this.searchInput.value = '';
        
        // 等待动画完成后移除active类
        setTimeout(() => {
            this.searchOverlay.classList.remove('active');
            
            // 恢复背景滚动
            document.body.style.overflow = '';
            
            // 移除输入框焦点
            this.searchInput.blur();
        }, 300);
    }

    /**
     * 处理搜索
     */
    handleSearch() {
        const searchTerm = this.searchInput.value.trim();
        
        if (searchTerm) {
            // 关闭搜索遮罩
            this.closeSearchOverlay();
            
            // 执行搜索，这里可以重定向到搜索结果页
            console.log('搜索关键词:', searchTerm);
            
            // 如果有路由模块，可以使用路由跳转
            if (window.router) {
                window.router.navigate(`/?search=${encodeURIComponent(searchTerm)}`);
            } else {
                // 简单处理：刷新页面并带上搜索参数
                window.location.href = `/?search=${encodeURIComponent(searchTerm)}`;
            }
        }
    }

    /**
     * 处理导航链接点击
     * @param {Event} e - 点击事件对象
     */
    handleNavLinkClick(e) {
        const target = e.currentTarget;
        const href = target.getAttribute('href');
        
        // 关闭移动端菜单（如果打开）
        if (this.isMenuOpen) {
            this.closeMobileMenu();
        }

        // 内部锚点链接处理
        if (href.startsWith('#')) {
            e.preventDefault();
            this.scrollToAnchor(href);
        } 
        // 其他链接可以由路由模块处理或默认行为
        else if (window.router && target.hasAttribute('router-link')) {
            // 已由路由模块处理，这里可以添加额外逻辑
        }
    }

    /**
     * 滚动到锚点位置
     * @param {string} anchor - 锚点选择器
     */
    scrollToAnchor(anchor) {
        const element = document.querySelector(anchor);
        
        if (element) {
            const headerOffset = this.header.offsetHeight;
            const elementPosition = element.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
            
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
        }
    }

    /**
     * 更新当前活动的导航链接
     */
    updateActiveNavLink() {
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.nav-menu a');
        
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            
            // 移除所有活动状态
            link.classList.remove('active');
            
            // 为匹配的路径添加活动状态
            if (href === '/' && currentPath === '/') {
                link.classList.add('active');
            } else if (href !== '/' && currentPath.startsWith(href)) {
                link.classList.add('active');
            }
        });
    }

    /**
     * 添加导航项
     * @param {Object} item - 导航项配置
     */
    addNavItem(item) {
        if (!this.navMenu) return;
        
        const navItem = document.createElement('li');
        const navLink = document.createElement('a');
        
        navLink.href = item.url;
        navLink.textContent = item.label;
        
        if (item.routerLink) {
            navLink.setAttribute('router-link', item.url);
        }
        
        if (item.icon) {
            const icon = document.createElement('i');
            icon.className = `icon ${item.icon}`;
            navLink.prepend(icon);
            navLink.prepend(' ');
        }
        
        navItem.appendChild(navLink);
        this.navMenu.appendChild(navItem);
        
        // 重新绑定事件
        navLink.addEventListener('click', (e) => {
            this.handleNavLinkClick(e);
        });
    }

    /**
     * 显示加载状态
     * @param {boolean} isLoading - 是否加载中
     */
    setLoading(isLoading) {
        if (isLoading) {
            this.header.classList.add('loading');
        } else {
            this.header.classList.remove('loading');
        }
    }

    /**
     * 销毁组件，清理事件监听器
     */
    destroy() {
        // 清理事件监听器
        if (this.mobileMenuButton) {
            this.mobileMenuButton.removeEventListener('click', this.toggleMobileMenu.bind(this));
        }

        if (this.searchButton) {
            this.searchButton.removeEventListener('click', this.toggleSearchOverlay.bind(this));
        }

        if (this.searchOverlay) {
            this.searchOverlay.removeEventListener('click', (e) => {
                if (e.target === this.searchOverlay) {
                    this.closeSearchOverlay();
                }
            });
        }

        if (this.searchInput) {
            this.searchInput.removeEventListener('keypress', this.handleSearch.bind(this));
        }

        // 移除滚动监听器
        window.removeEventListener('scroll', () => {});
        
        // 移除document事件监听器
        document.removeEventListener('keydown', () => {});
    }
}

// 导出组件类
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
    module.exports = HeaderComponent;
} else {
    window.HeaderComponent = HeaderComponent;
}

/**
 * 使用示例：
 * 
 * // 在页面加载完成后初始化
 * document.addEventListener('DOMContentLoaded', () => {
 *   const header = new HeaderComponent();
 *   header.init();
 *   
 *   // 可以动态添加导航项
 *   header.addNavItem({
 *     label: '新页面',
 *     url: '/new-page',
 *     routerLink: true
 *   });
 * });
 */